<template>
  <el-date-picker
    v-model="date"
    :clearable="false"
    type="daterange"
    start-placeholder="开始日期"
    range-separator="到"
    end-placeholder="结束日期"
    @change="changeDate"
  />
</template>

<script setup>

const props = defineProps({
  startTime: {
    type: String,
    default: ''
  },
  endTime: {
    type: String,
    default: ''
  }
})

const date = ref([]) // 日期选择器的值

function FormatDate (date) {
  const year = date.getFullYear() // 获取年份
  const month = date.getMonth() + 1 // 获取月份，月份从0开始，所以需要加1
  const day = date.getDate() // 获取日期

  // 使用模板字符串来格式化日期，确保月份和日期为两位数
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
}

const emit = defineEmits(['startTime', 'endTime'])

function changeDate () {
  emit('startTime', FormatDate(date.value[0]))
  emit('endTime', FormatDate(date.value[1]))
}

onMounted(() => {
  if (props.startTime) {
    date.value[0] = new Date(props.startTime)
    date.value[1] = new Date(props.endTime)
  }
})
</script>
